<template>
  <div>
    <!-- 歌手头像 -->
    <van-nav-bar fixed placeholder :title="singerName" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="max-box">
      <div class="top-box">
        <div class="img-box">
          <img class="photo" :src="singerInfo.img1v1Url+'?param=750y750'" alt="">
        </div>
        <div class="mask"></div>
      </div>
      <div class="text">
        播放全部共{{this.dataSource.length}}首
      </div>
    </div>
    <!-- 音乐列表组件 -->
    <SongListPage :data="dataSource" :singerInfo="singerInfo" :class="{hasPadding: showPlayer}" />
  </div>
</template>

<script  type='module'>
import SongListPage from '../../components/SongListPage'
import { mapState } from 'vuex'
export default {
  name: 'PlayMusic',
  components: {
    // 音乐列表组件
    SongListPage
  },
  props: [
    'SingerId'
  ],
  data () {
    return {
      // 音乐列表
      dataSource: [],
      // 歌手信息
      singerInfo: {},
      // 歌手名称
      singerName: ''
    }
  },
  computed: {
    ...mapState({
      showPlayer: state => (state.player.currentIndex >= 0)
    })
  },
  methods: {
    // 获取歌手信息
    async getSingerInfo () {
      const res = await this.$http({ url: '/artists', params: { id: this.SingerId } })
      this.singerInfo = {
        briefDesc: res.artist.briefDesc,
        followed: res.artist.followed,
        img1v1Url: res.artist.img1v1Url,
        id: res.artist.id
      }
      // 音乐列表
      this.dataSource = res.hotSongs.map((item) => ({
        id: item.id,
        name: item.name, // 音乐名称
        ar: item.ar.map(arItem => arItem.name).join('/'), // 歌手列表
        al: { // 专辑信息
          name: item.al.name,
          picUrl: item.al.picUrl
        }
      }))
      // console.log(this.dataSource)
      this.singerName = this.dataSource[0].ar // 歌手名称
    },
    onClickLeft () {
      this.$router.go(-1)
    }
  },
  created () {
    // 调用获取歌手信息
    this.getSingerInfo()
  }
}
</script>

<style scoped lang="less">
@keyframes rotate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
.max-box {
  position: relative;
  .top-box {
    width: 100%;
    position: relative;
    // height: 100vw;
    .img-box {
      width: 100%;
      height: 100vw;
      position: absolute;
      top: 0px;
      z-index: -1;
      left: 0px;
      .photo {
        width: 100%;
        height: 100vw;
      }
    }
    .mask {
      width: 100%;
      height: 100vw;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 99;
    }
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0px;
    left: 0px;
    line-height: 45px;
    background-color: #fff;
    font-size: 18px;
    padding: 0 24px;
    box-sizing: border-box;
    z-index: 0;
    border-radius: 18px 18px 0 0;
    border-bottom: 1px solid #eee;
  }
}
#app {
  position: relative;
  width: 100%;
  height: 100%;
}
.hasPadding {
  padding-bottom: 60px;
}
</style>
